<template>
    <div>
        <!-- 面包屑导航-->
        <el-breadcrumb style="margin-left: 20px;margin-top: 20px" separator-class="el-icon-shopping-cart-full">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item ><a @click="findStatus(-1)">全部订单</a></el-breadcrumb-item>
            <el-breadcrumb-item ><a @click="findStatus(0)">待付款</a></el-breadcrumb-item>
            <el-breadcrumb-item ><a @click="findStatus(1)">待发货</a></el-breadcrumb-item>
            <el-breadcrumb-item ><a @click="findStatus(2)">待收货</a></el-breadcrumb-item>
            <el-breadcrumb-item ><a @click="findStatus(3)">待评价</a></el-breadcrumb-item>
            <el-breadcrumb-item ><a @click="findStatus(4)">已关闭</a></el-breadcrumb-item>
            <el-breadcrumb-item hidden><a></a></el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片试图-->
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入订单编号" v-model="query" clearable >
                        <el-button slot="append" icon="el-icon-search" @click="getSelect(query)"></el-button>
                    </el-input>
                </el-col>
            </el-row>

            <!--订单列表-->
            <el-table :data="orderList" border stripe @expand-change="getOrderDetail">
                <el-table-column label="明细" type="expand">
                    <template slot-scope="scope">
                        <!-- 订单下明细的商品列表-->
                        <el-table :data="scope.row.productOrderItemList" border stripe="">
                            <el-table-column label="封面" width="100px" header-align="center" align="center">
                                <template slot-scope="sc">
                                    <el-popover placement="top-start" trigger="hover">
<!--                                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1606288963.72951431.jpg" style="width: 150px; height: 150px" />-->
<!--                                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1606288963.72951431.jpg" slot="reference" style="width: 50px; height: 50px" /> -->
                                        <img src="/img/productPictures/xiHongShi_0.jpg" style="width: 150px; height: 150px" />
                                        <img src="/img/productPictures/xiHongShi_0.jpg" slot="reference" style="width: 50px; height: 50px" />
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column label="标题" prop="productOrderItemProduct.productTitle"></el-table-column>
                            <el-table-column label="数量" prop="productorderitemNumber" width="100px"></el-table-column>
                            <el-table-column label="单价" prop="productorderitemPrice" width="100px"></el-table-column>
                            <el-table-column label="小计" prop="productorderitemTotalPrice" width="100px"></el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="订单号" prop="productorderCode"></el-table-column>
                <el-table-column label="收货人" prop="productorderReceiver"></el-table-column>
                <el-table-column label="订单状态">
                    <template slot-scope="scope">
                        <el-tag effect="dark" size="mini" type="danger" v-if="scope.row.productorderStatus === 0">待付款</el-tag>
                        <el-tag effect="dark" size="mini" type="success" v-if="scope.row.productorderStatus === 1">待发货</el-tag>
                        <el-tag effect="dark" size="mini" type="" v-if="scope.row.productorderStatus === 2">待收货</el-tag>
                        <el-tag effect="dark" size="mini" type="warning" v-if="scope.row.productorderStatus === 3">交易成功</el-tag>
                        <el-tag effect="dark" size="mini" type="info" v-if="scope.row.productorderStatus === 4">交易关闭</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="下单时间" prop="productorderPayDate"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-tooltip effect="dark" content="查看收货地址" placement="top" :enterable="false">
                            <el-button type="primary" size="mini" icon="el-icon-edit" @click="showAddressDialog(scope.row.productorderId)"></el-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="查看物流信息" placement="top" :enterable="false">
                            <el-button type="warning" size="mini" icon="el-icon-location" @click="showProgessDialog()"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页-->
<!--            <el-pagination-->
<!--                    @size-change="handleSizeChange"-->
<!--                    @current-change="handleCurrentChange"-->
<!--                    :current-page="queryInfo.pagenum"-->
<!--                    :page-sizes="[5, 10, 15]"-->
<!--                    :page-size="queryInfo.pagesize"-->
<!--                    layout="total, sizes, prev, pager, next, jumper"-->
<!--                    :total="total"-->
<!--            >-->
<!--            </el-pagination>-->
        </el-card>

<!--         修改收货地址的对话框-->
        <el-dialog title="修改收货地址" :visible.sync="addresVisible" width="50%" @close="addressDialogClosed">
            <el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px">
                <el-form-item label="省市区/县" prop="address1">
                    <el-cascader v-model="addressForm.address1" :options="citaData"></el-cascader>
                </el-form-item>

                <el-form-item label="详细地址" prop="address2">
                    <el-input v-model="addressForm.address2"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="addresVisible = false">取 消</el-button>
        <el-button type="primary" @click="editAddress">确 定</el-button>
      </span>
    </el-dialog>

<!--         查看物流进度的对话框-->
        <el-dialog title="物流进度" :visible.sync="progessVisible" width="50%">
            <el-timeline>
                <el-timeline-item v-for="(activity, index) in progressInfo" :key="index" :timestamp="activity.time">
                    {{ activity.context }}
                </el-timeline-item>
            </el-timeline>
        </el-dialog>
    </div>
</template>

<script>
    //import citaData from 'src/assets/js/citydata.js'
    export default {
        name:'myOrder',
        data() {
            return {
                query:'',
                // 订单列表数据
                orderList: [],
                originOrderList:[],
                total: 0,
                addresVisible: false,
                // 省市区数据
                citaData:null,
                addressForm: {
                    address1: [],
                    address2: '',
                },
                addressFormRules: {
                    address1: [{ required: true, message: '请选择省市区/县', trigger: 'blur' }],
                    address2: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
                },
                order_id: null,
                // 物流进度对话框
                progessVisible: false,
                progressInfo: [],
            }
        },
        created() {
            this.getOrderList()
        },
        methods: {
             getOrderList() {
                let userId = this.$cookies.get("id")
                 this.$axios.get(`/api/productOrder/findByUserId/${userId}`).then(res => {
                    if (res.status !== 200) {
                        return this.$message.error('获取订单列表失败')
                    }
                    console.log('订单合集', res.data)
                    this.orderList = res.data
                    this.originOrderList = res.data
                     res.data.map(item =>{
                         item.productOrderItemList.map(innerItem =>{
                             innerItem.productorderitemTotalPrice = (innerItem.productorderitemNumber * innerItem.productorderitemPrice).toFixed(2)
                         })
                     })

                    //this.total = res.data.total
                })
            },
            findStatus(status){
                console.log("进入findStatus")
                let currentOrderList = []
                if (status == -1){
                    this.orderList = this.originOrderList
                    return;
                }
               currentOrderList = this.originOrderList.filter(item =>{
                   return item.productorderStatus == status
               })
                console.log("currentList",currentOrderList)
                this.orderList = currentOrderList
            },
            getSelect(query){
                this.$axios.get(`/api/productOrder/findByCode/${this.query}/1/10`).then(res =>{
                    if (res.data ==200){
                        this.orderList = res.data
                    }else {
                        this.$confirm('未查找到相关数据','查询提示',{
                            confirmButtonText: '好吧',
                            type : "warning"
                        }).then(() => {
                        })
                    }
                })
            },
            // 改变页数据展示量大小
            handleSizeChange(pagesize) {
                this.queryInfo.pagesize = pagesize
                this.getOrderList()
            },
            // 改变页码
            handleCurrentChange(pagenum) {
                this.queryInfo.pagenum = pagenum
                this.getOrderList()
            },
            // 获取订单详情
            async getOrderDetail(row) {
                // row 代表每条记录的信息
                console.log("获取订单详情row",row)
                // const { data: res } = await this.this.$axios.get(`/api/productOrderItem/findByOrderId/${row.productorderId}`)
                // if (res.meta.status !== 200) {
                //     return this.$message.error('获取订单明细失败')
                // }
                // 直接这样添加不能动态响应,可以在获取订单信息的时候给每条记录加一个detail字段
                // 这样就相当于为属性赋值而不是添加属性了
                //row.detail = res.data.goods

                // detail 中不包含商品的名称和重量等信息  所以还需要根据goods_id去获取相关的商品信息
                // row.detail.forEach(async (item) => {
                //     const { data: res } = await this.$http.get(`goods/${item.goods_id}`)
                //     if (res.meta.status !== 200) {
                //         return this.$message.error('获取商品详情失败')
                //     }
                //     this.$set(item, 'goods_name', res.data.goods_name) // 为商品对象响应式的添加对象
                //     this.$set(item, 'goods_weight', res.data.goods_weight)
                //     this.$set(item, 'url', res.data.pics[0].pics_big_url) // 取一张即可用做展示
                // })
            },
            // 显示收货地址的对话框
            showAddressDialog(order_id) {
                this.order_id = order_id
                this.addresVisible = true
            },
            // 监听修改地址对话框的关闭事件
            addressDialogClosed() {
                this.$refs.addressFormRef.resetFields()
            },

            // 修改地址
            editAddress() {
                this.$refs.addressFormRef.validate(async (valid) => {
                    if (!valid) {
                        return
                    }
                    const { data: res } = await this.$http.put(`orders/${this.order_id}/address`, {
                        consignee_addr: this.addressForm.address1.join(',') + ',' + this.addressForm.address2,
                    })
                    if (res.status !== 200) {
                        return this.$message.error('修改订单收获地址失败')
                    }
                    this.addresVisible = false
                    this.getOrderList()
                    this.$message.success('修改收货地址成功!')
                })
            },
            // 显示物流进度对话框
            async showProgessDialog() {
                const { data: res } = await this.$http.get('/kuaidi/815294206237577')
                if (res.status !== 200) {
                    return this.$message.error('获取物流进度失败')
                }
                this.progressInfo = res.data

                this.progessVisible = true
            },
        },
    }
</script>

<style>
    .el-cascader {
        width: 100%;
    }
</style>
